<html>
<!--
Gradient Text Javascript.

Released under Apache License, Version 2.0.
-->

<head>
<title>Text with Colour Gradient</title>

<script language="JavaScript">
<!--

/*
colourGradient

JavaScript to display text in a colour gradient.

This is achieved by displaying each character of the text in a different colour.

----- ***** -----

Usage:

colourGradient(colour, flag, rStep, gStep, bStep, str)
where,
	colour -- rgb triplet, specified in hex
	flag   -- indicating which component should be changed
		r   - only red,         g  - only green, b  - only blue
		rg  - red & green,      rb - red & blue, gb - green & blue
		rgb - red, green & blue
	rStep  -- step for red component
	gStep  -- step for green component
	bStep  -- step for blue component
	str    -- string to display
*/

function decToHex(dec)
{
	hexChars = "0123456789ABCDEF";
	if ( dec > 255 ) {
		dec = dec % 255;
	}

	var i = dec % 16;
	var j = (dec - i) / 16;
	
	result = hexChars.charAt(j) + hexChars.charAt(i);

	return result;
}

/* // another one
function decToHex(dec)
{
	hex = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
	tmp = hex[Math.floor(dec/16)] + hex[dec/16];
	return tmp;
}
*/

function hexToDec(hex)
{
	num = 0;
	num1 = 0;
	if ( ( hex.charAt(0) >= '0' ) && ( hex.charAt(0) <= '9' ) ) {
		num = parseInt(hex.charAt(0));
	}
	if ( hex.charAt(0) == 'a' ) {
		num = 10;
	}
	if ( hex.charAt(0) == 'b' ) {
		num = 11;
	}
	if ( hex.charAt(0) == 'c' ) {
		num = 12;
	}
	if ( hex.charAt(0) == 'd' ) {
		num = 13;
	}
	if ( hex.charAt(0) == 'e' ) {
		num = 14;
	}
	if ( hex.charAt(0) == 'f' ) {
		num = 15;
	}

	if ( ( hex.charAt(1) >= '0' ) && ( hex.charAt(1) <= '9' ) ) {
		num1 = parseInt(hex.charAt(1));
	}
	if ( hex.charAt(1) == 'a' ) {
		num1 = 10;
	}
	if ( hex.charAt(1) == 'b' ) {
		num1 = 11;
	}
	if ( hex.charAt(1) == 'c' ) {
		num1 = 12;
	}
	if ( hex.charAt(1) == 'd' ) {
		num1 = 13;
	}
	if ( hex.charAt(1) == 'e' ) {
		num1 = 14;
	}
	if ( hex.charAt(1) == 'f' ) {
		num1 = 15;
	}

	num = num * 16 + num1;

	return num;
}

function colourLookup(name)
{
	if ( name == "red" ) {
		return "ff0000";
	}
	if ( name == "green" ) {
		return "00ff00";
	}
	if ( name == "blue" ) {
		return "0000ff";
	}
	
	return "ffffff";
}

function showText(r, g, b, str)
{
	document.write("<font color=\"#" + r + g + b + "\">");
	document.write(str);
	document.write("</font>");
}

function colourGradientPrimary(r, g, b, flag, rStep, gStep, bStep, str)
{
	r = hexToDec(r); g = hexToDec(g); b = hexToDec(b);

	for ( i=0; i < str.length; i++ ) {
		showText(decToHex(r), decToHex(g), decToHex(b), str.charAt(i));
		if ( flag == "r" ) {
			r += rStep;
		}
		if ( flag == "g" ) {
			g += gStep;
		}
		if ( flag == "b" ) {
			b += bStep;
		}
		if ( flag == "rg" ) {
			r += rStep;
			g += gStep;
		}
		if ( flag == "rb" ) {
			r += rStep;
			g += gStep;
		}
		if ( flag == "gb" ) {
			g += gStep;
			b += bStep;
		}
		if ( flag == "rgb" ) {
			r += rStep;
			g += gStep;
			b += bStep;
		}
	}
}

function colourGradient(colour, flag, rStep, gStep, bStep, str)
{
	colourGradientPrimary(colour.substring(0, 2), colour.substring(2, 4), colour.substring(4, 6), flag, rStep, gStep, bStep, str);
}

function colorGradient(colour, flag, rStep, gStep, bStep, str)
{
	colourGradient(colour, flag, rStep, gStep, bStep, str);
}

// -->
</script>

</head>
<body bgcolor="#ffffff">
<font color="#0000ff"> This is a string in blue color.</font>
<p>
<h4>
<script>
<!--
colourGradient("000000", "rb", 7, 1, 5,
	"This is a very long string being used for testing purposes")
// -->
</script>
</h4>
</body>
</html>
